<template>
  <view class="container">
    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <up-form labelPosition="left" :model="form" :rules="rules" ref="form1" :border-bottom="true"
             labelWidth="150rpx" labelAlign="left">
      <up-form-item label="昵称" prop="form.name" :border-bottom="true" ref="item1">
        <up-input placeholder="请输入昵称" border="none" inputAlign="right"></up-input>
      </up-form-item>
      <up-form-item label="手机号码" prop="form.name" :border-bottom="true" ref="item1">
        <up-input inputAlign="right" placeholder="请输入手机号码" border="none"></up-input>
      </up-form-item>
      <up-form-item label="性别" prop="form.sex" :border-bottom="true" @click="showSex = true; hideKeyboard()"
                    ref="item1">

        <view style="display: flex;justify-content: flex-end">
          <up-radio-group style="width: auto" v-model="radiovalue1" placement="row" @change="groupChange">
            <up-radio :customStyle="{ marginBottom: '8px',width:'100rpx' }" v-for="(item, index) in radiolist1"
                      :key="index"
                      :label="item.name" :name="item.name" @change="radioChange" activeColor="#f0ad4e"
                      class="radio-box">
            </up-radio>
          </up-radio-group>
        </view>
      </up-form-item>
      <up-form-item label="生日" prop="form.name" :border-bottom="false" ref="item1"
                    @click="show = true; hideKeyboard()">
        <up-datetime-picker :show="show" v-model="value1" mode="date"></up-datetime-picker>

        <up-input placeholder="请选择生日" v-model="value1" border="none" inputAlign="right"></up-input>
        <template #right>
          <up-icon name="arrow-right"></up-icon>
        </template>
      </up-form-item>
      <up-form-item label="入会时间" prop="form.name" :border-bottom="true" ref="item1"
                    @click="show = true; hideKeyboard()">
        <up-datetime-picker :show="show" v-model="value1" mode="date"></up-datetime-picker>
        <up-input placeholder="请选择入会时间" v-model="value1" border="none" inputAlign="right"></up-input>
        <template #right>
          <up-icon name="arrow-right"></up-icon>
        </template>
      </up-form-item>
    </up-form>
    <up-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
                     @close="showSex = false" @select="sexSelect">
    </up-action-sheet>
    <view class="footer">
      <up-button @click="submit" type="warning" shape="circle">保存</up-button>
    </view>
  </view>
</template>
<script setup ts>
import { ref, reactive } from "vue";
import { onReady } from "@dcloudio/uni-app";
// 基本案列数据
const radiolist1 = reactive([
  {
    name: "男",
    disabled: false,
  },
  {
    name: "女",
    disabled: false,
  }]);
const show = ref(false);
const value1 = ref("2024-10-20");
// 使用 reactive 创建响应式状态  
const state = reactive({
  showSex: false,
  form: {
    name: "uview-plus UI",
    sex: "",
  },
  actions: [
    { name: "男" },
    { name: "女" },
    { name: "保密" },
  ],
  rules: {
    "userInfo.name": {
      type: "string",
      required: true,
      message: "请填写姓名",
      trigger: ["blur", "change"],
    },
    "userInfo.sex": {
      type: "string",
      max: 1,
      required: true,
      message: "请选择男或女",
      trigger: ["blur", "change"],
    },
  },
  radio: "",
  switchVal: false,
  rules: {
    "userInfo.name": {
      type: "string",
      required: true,
      message: "请填写姓名",
      trigger: ["blur", "change"],
    },
    code: {
      type: "string",
      required: true,
      len: 4,
      message: "请填写4位验证码",
      trigger: ["blur"],
    },
    "userInfo.sex": {
      type: "string",
      max: 1,
      required: true,
      message: "请选择男或女",
      trigger: ["blur", "change"],
    },
    radiovalue1: {
      type: "string",
      min: 1,
      max: 2,
      message: "生命是美好的，请不要放弃治疗",
      trigger: ["change"],
    },
    checkboxValue1: {
      type: "array",
      min: 2,
      required: true,
      message: "不能太宅，至少选两项",
      trigger: ["change"],
    },
    intro: {
      type: "string",
      min: 3,
      required: true,
      message: "不低于3个字",
      trigger: ["change"],
    },
    hotel: {
      type: "string",
      min: 2,
      required: true,
      message: "请选择住店时间",
      trigger: ["change"],
    },
    "userInfo.birthday": {
      type: "string",
      required: true,
      message: "请选择生日",
      trigger: ["change"],
    },
  },
});

// 使用 ref 创建响应式引用  
const formRef = ref(null);

// 定义方法  
function sexSelect(e) {
  state.model1.userInfo.sex = e.name;
  if (formRef.value) {
    formRef.value.validateField("userInfo.sex");
  }
}


const datetimePickerRef = ref(null);

const formatter = (type, value) => {
  if (type === "year") {
    return `${value}年`;
  }
  if (type === "month") {
    return `${value}月`;
  }
  if (type === "day") {
    return `${value}日`;
  }
  return value;
};

onReady(() => {
  // 微信小程序需要用此写法
  datetimePickerRef.value.setFormatter(formatter);
});
</script>
<style lang="scss" scoped>
.container {
  padding: 0 20rpx;
  box-sizing: border-box;

  .u-flex {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .radio-box {
    margin-right: 20rpx;
  }


  .footer {
    margin-top: 50rpx;
    padding: 20rpx 60rpx;
  }
}

::v-deep .u-radio-group--row {
  justify-content: flex-end;
}
</style>